<template>
  <div class="menu">
    <el-form inline ref="form" :model="formMessage">
      <el-form-item label="菜单名称" prop="name">
        <el-input type="text" v-model="formMessage.name" clearable placeholder="请输入菜单名称" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="loading" @click="handleGetData">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
        <el-button type="primary" @click="handleAddMenu">添加菜单</el-button>
      </el-form-item>
    </el-form>
    <div class="mt20">
      <el-table :data="tableData" v-loading="loading">
        <el-table-column type="index" label="编号"></el-table-column>
        <el-table-column prop="name" label="菜单名称"></el-table-column>
        <el-table-column prop="icon" label="前端图标"></el-table-column>
        <el-table-column prop="level" label="排序"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="small" @click="handleEdit(scope.row.id)">编辑</el-button>
            <el-button type="danger" size="small" @click="handleDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="mt20">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="formMessage.current"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="formMessage.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="dataTotal">
      </el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
import { Form, Message } from 'element-ui'
import { Vue, Component } from 'vue-property-decorator'
import { delMenu, getMenuPage } from '@/services/boss'

@Component
export default class MenuPage extends Vue {
  private formMessage: any = {
    name: '',
    current: 1,
    size: 10
  }

  private tableData: Array<any> = []
  private loading = false
  private dataTotal = 0

  handleSearch () {
    this.formMessage.current = 1
    this.handleGetData()
  }

  async handleGetData () {
    try {
      const params = Object.assign({}, this.formMessage)
      this.loading = true
      const { data } = await getMenuPage(params)
      this.tableData = data.records
      this.dataTotal = data.total
    } catch (e: any) {
      Message.error(e.message)
    } finally {
      this.loading = false
    }
  }

  handleCurrentChange (page: number) {
    this.formMessage.current = page
    this.handleGetData()
  }

  handleSizeChange (size: number) {
    this.formMessage.current = 1
    this.formMessage.size = size
    this.handleGetData()
  }

  handleReset () {
    (this.$refs.form as Form).resetFields()
    this.handleSearch()
  }

  handleEdit (id: number) {
    this.$router.push({
      path: `/menu/${id}/edit`
    })
  }

  async handleDel (row: any) {
    await this.$confirm(`确认删除${row.name}菜单吗？`, '提示', {
      closeOnClickModal: false
    })
    const { id } = row
    try {
      await delMenu(id)
      Message.success('删除成功')
      await this.handleGetData()
    } catch (e) {
      console.error(e)
      Message.error('删除失败')
    }
  }

  handleAddMenu () {
    this.$router.push({
      path: '/menu/create'
    })
  }

  mounted () {
    this.handleSearch()
  }
}
</script>

<style scoped>

</style>
